<template>
  <div id="communities-list">
    <el-card
      v-for="community in communities"
      :key="community.id"
      class="community-card"
    >
      <router-link
        :to="`/${$rp.COMMUNITIES}/${community.id}`"
        class="flex align-items-center hover-box"
      >
        <el-avatar :src="community.avatar" shape="square" class="s90 shrink-0" />
        <div class="flex-1 m-l-16">
          <div class="h3 hover-box-link">{{ community.title }}</div>
          <p class="m-t-8">{{ community.desc }}</p>
          <div class="flex">
            <div>关联的空间数： {{ community.counts.spaces }}</div>
            <div class="m-l-16">资源总数： {{ community.counts.docs }}</div>
            <div class="m-l-16">问题总数： {{ community.counts.issues }}</div>
            <div class="m-l-16">社区人数： {{ community.counts.members }}</div>
          </div>
        </div>
      </router-link>
    </el-card>
    <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
  </div>
</template>

<script>
import * as format from '../format';

export default {
  name: 'CommunitiesList',
  data() {
    return {
      communities: [], // 社区列表
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  created() {
    this.loadCommunities();
  },
  methods: {
    // 加载社区列表
    loadCommunities() {
      this.$api.communities.index()
        .then((res) => {
          this.communities = format.formatCommunities(res.data);
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
